<template>
	<view>
		<!-- 视频讲解 :src="getUrl(sourceUrl)"-->
		<view class="zsjj" v-if="loreTypeName == 'video'">
			<view>
				<video id="myVideo" class="video"
					:autoplay="false"
					:src="getUrl(sourceUrl)"
				></video>
			</view>
		</view>
		<view class="modWrap" v-if="loreTypeName != 'video'">
			<block
				v-for="(item,i) in list"
				:key="i"
			>
				<template  v-if="loreTypeName == 'example'">
					<view class="modItem">
						<view class="modTit">
							<view class="lineView"></view>
							<view>解题示范第{{i+1}}题</view> 
						</view>
						<view class="modCon">
							<view class="innerCon">
								<view class="conItemJt">
									<view class="conTit">题干:</view>
									<view><rich-text :nodes="formatImgRichText(formatContent(item.queSub))"></rich-text></view>
								</view>
								<view class="jtsfTipsItem">
									<view class="cir"></view>
									<view>请拿出纸和笔写下你的解题过程</view>
								</view>
								<view class="jtsfTipsItem">
									<view class="cir"></view>
									<view>请注意规范步骤和书写格式</view>
								</view>
								<view class="jtsfTipsItem">
									<view class="cir"></view>
									<view>请像对待考试一样解答完试题</view>
								</view>
								<view class="viewAns" @tap="showJtsfAns(item)">
									<text>查看答案</text>
									<text class="iconfont icon-sanjiao"></text>
								</view>
								<view class="jtsfAns" v-if="item.showAnsFlag">
									<view class="conItemJt">
										<view class="conTit">答案:</view>
										<view><rich-text :nodes="formatImgRichText(formatContent(item.queAnswer))"></rich-text></view>
									</view>
									<view class="conItemJt">
										<view class="conTit">解析:</view>
										<view><rich-text :nodes="formatImgRichText(formatContent(item.queResolution))"></rich-text></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template  v-if="loreTypeName == 'loreList'">
					<view class="modItem">
						<view class="modTit">
							<view class="lineView"></view>
							<view>{{item.loreType}}{{i+1}}<text class="note">(请认真背诵)</text></view>
						</view>
						<view class="modCon">
							<view class="innerCon">
								<view class="conItem">
									<view class="conTit">标题:</view>
									<view>{{item.lqsTitle}}</view>
								</view>
								<view class="conItem">
									<view class="conTit">内容:</view>
									<view class="detCon">
										<rich-text :nodes="formatImgRichText(formatContent(item.lqsContent))"></rich-text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template  v-if="loreTypeName == 'guide'">
					<block v-if="i==0">
						<view class="modItem">
							<view class="modTit">
								<view class="lineView"></view>
								<view>{{item.loreType}}</view>
							</view>
							<view class="modCon">
								<view class="innerCon">
									<view class="conItem">
										<view class="conTit">标题:</view>
										<view>{{item.lqsTitle}}</view>
									</view>
									<view class="conItem">
										<view class="conTit">内容:</view>
										<view class="detCon"><rich-text :nodes="formatImgRichText(formatContent(item.lqsContent))"></rich-text></view>
									</view>
								</view>
							</view>
						</view>
					</block>
					<block v-else>
						<template v-if="list[i-1].loreType == list[i].loreType">
							<view class="modItem spec">
								<view class="modCon">
									<view class="innerCon">
										<view class="conItem">
											<view class="conTit">标题:</view>
											<view>{{item.lqsTitle}}</view>
										</view>
										<view class="conItem">
											<view class="conTit">内容:</view>
											<view class="detCon"><rich-text :nodes="formatImgRichText(formatContent(item.lqsContent))"></rich-text></view>
										</view>
									</view>
								</view>
							</view>
						</template>
						<template v-else>
							<view class="modItem">
								<view class="modTit">
									<view class="lineView"></view>
									<view>{{item.loreType}}</view>
								</view>
								<view class="modCon">
									<view class="innerCon">
										<view class="conItem">
											<view class="conTit">标题:</view>
											<view>{{item.lqsTitle}}</view>
										</view>
										<view class="conItem">
											<view class="conTit">内容:</view>
											<view class="detCon"><rich-text :nodes="formatImgRichText(formatContent(item.lqsContent))"></rich-text></view>
										</view>
									</view>
								</view>
							</view>
						</template>
					</block>
				</template>
			</block>
		</view>
	</view>
</template>

<script>
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	export default {
		props:{
			loreTypeName:String,
			list:Array,
			sourceUrl:String
		},
		components:{
			jyfParser
		},
		computed:{
			formatContent(){
				return function(content){
					if(content != undefined ){
						var reg = new RegExp("Module/", "g");
						if(content.indexOf('Module/') != -1 && content != undefined){
							return content.replace(reg, this.zhuXueServer + '/Module/');
						}else{
							return content;
						}
					}
				}
			},
			//设置img宽度
			formatImgRichText(){
				return function(content){
					if(content != undefined ){
						var reg = new RegExp("<img", "g");
						if(content.indexOf('<img') != -1){
							return content.replace(reg, '<img style="max-width:100%;height:auto;display:block"')
						}else{
							return content
						}
					}
				}
			}
		},
		data(){
			return{

			}
		},
		methods:{
			getUrl(url){
				return this.zhuXueServer + '/' + url;
			},
			showJtsfAns(item){
				this.$emit('showJtsfAns',item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/scss/mapDet.scss';
</style>